<template>
  <section>
    <el-select v-model="selUser" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
      <el-option v-for="user in users" :key="user.id" :label="user.name" :value="user.id">
        <span style="float: left">{{ user.name }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ user.phone }}</span>
      </el-option>
    </el-select>
    <el-row v-if="selUser">
      <el-table :data="ordersOfUser">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="创建时间" prop="created" :formatter="formatDate">
        </el-table-column>
        <el-table-column label="订单标题" prop="title">
        </el-table-column>
        <el-table-column label="订单类型" prop="orderType">
        </el-table-column>
        <el-table-column label="订单内容">
          <template slot-scope="scope">
            <el-button @click='detailBtn(scope)' size="mini" >查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="155">
          <template slot-scope="scope">
            <el-button :type="scope.row.edit?'success':'primary'" @click='confirmOrderItem(scope)' size="mini" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
            <el-button @click='delOrderItem(scope)' size="mini" >{{scope.row.edit?'取消':'删除'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog title="订单详情" :visible.sync="showOrderDetailDialog">
      <el-table :data="currOrderItems">

      </el-table>
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import DateFormat from '@/common/date-formater'
  import schedule from "../../sdk/api/schedule"
  import department from "../../sdk/api/department"
  import errHandler from '@/assets/errHandler'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "order",
    data() {
      return {
        users:[],
        selUser:null,
        loading: false,
        ordersOfUser:null,
        showOrderDetailDialog:false,
        currOrderItems:null,
      }
    },
    created(){
    },
    computed:{
    },
    watch:{
      selUser(nv,ov){
        console.log(nv)//获得用户id
        //加载该用户的历史订单
        this.getOrderList(nv)
      }
    },
    mounted() {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      formatDate(row, column, cellValue, index){
        return DateFormat.format(cellValue)
      },
      remoteMethod(query) {
        const req = {
          keyword: query
        }
        this.fetch({name:"getCustomerList",data:{...req}})
          .then(res=>{
            console.log(res)
            this.users=res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getOrderList(userId){
        this.fetch({name:"getOrderList",data:{page:0,departmentId:16,userId}})//这里给了一个默认的部门Id，实际应用以实地部门为准
          .then(res=>{
            this.ordersOfUser = res.content
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      detailBtn(scope){
        console.log(scope)
        this.currOrderItems = scope.row.orderItems
        this.showOrderDetailDialog = true
      }
    }
  }
</script>

<style scoped>

</style>
